<template>
  <view :style="colorStyle">
    <view class="searchModule">
      <view class="block1 flex aitems">
        <u-icon name="search" size="22" color="#1F1F1F"></u-icon>
        <view class="input">
          <input
            type="text"
            v-model="name"
            class="c1F1F1F f28"
            placeholder="搜索关键词找到心仪好物吧～"
            placeholder-class="c858585 f28"
            @confirm="searchChange"
          />
        </view>
        <view class="btn cfff f24" @click="searchChange"> 搜索 </view>
      </view>
      <view class="block2 flex aitems sa f32 c525252">
        <view class="info1" @click="screenTypeChange(1)">
          <view :class="screenType == 1 ? 'tip1 themeColor' : 'tip1'">
            分类
          </view>
        </view>
        <view class="info1 flex aitems" @click="screenTypeChange(2)">
          <view :class="screenType == 2 ? 'tip1 themeColor' : 'tip1'">
            价格
          </view>
          <view class="arrow-down-fill">
            <u-icon
              name="arrow-down-fill"
              :color="screenType == 2 ? 'var(--view-theme)' : '#525252'"
              size="8"
            ></u-icon>
          </view>
        </view>
        <view class="info1 flex aitems" @click="saleChange">
          <view class="tip1"> 销量 </view>
          <view class="arrow-down-fill">
            <u-icon
              name="arrow-up-fill"
              :color="saleType == 2 ? 'var(--view-theme)' : '#525252'"
              size="8"
            ></u-icon>
            <u-icon
              name="arrow-down-fill"
              :color="saleType == 1 ? 'var(--view-theme)' : '#525252'"
              size="8"
            ></u-icon>
          </view>
        </view>
        <view class="info1 flex aitems" @click="priceChange">
          <view :class="priceType == 3 ? 'tip1 themeColor' : 'tip1'">
            总价
          </view>
          <view class="arrow-down-fill">
            <u-icon
              name="arrow-up-fill"
              :color="priceType == 2 ? 'var(--view-theme)' : '#525252'"
              size="8"
            ></u-icon>
            <u-icon
              name="arrow-down-fill"
              :color="priceType == 1 ? 'var(--view-theme)' : '#525252'"
              size="8"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 200rpx"> </view>
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, indexs) in 10"
        :key="'skeleton' + indexs"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="goodsModule" v-if="loadingPage">
      <view
        class="goodslist flex"
        v-for="(item, index) in list"
        :key="item.id"
        @click.stop="gourl(`/pages/goods/detail?id=${item.id}`)"
      >
        <view class="goodsimgBox">
          <image :src="item.img" class="goodsimg" mode="aspectFill"></image>
          <view class="no-stock" v-if="item.stock <= 0">
            <image
              src="http://xpj40szpt.signalpha.cn/img/img101.png"
              mode="widthFix"
            />
          </view>
        </view>
        <view class="goodsinfo flex between column">
          <view class="block1">
            <text class="goodsname ellipsis2 c1F1F1F f28">
              {{ item.name }}
            </text>
            <view class="goodslabel flex aitems wrap">
              <view
                class="label f22 fontWeight"
                v-for="(items, indexs) in item.tagName
                  ? item.tagName.split(',')
                  : 0"
                :key="'label' + indexs"
              >
                {{ items }}
              </view>
            </view>
            <view class="goodssale c858585 f22">
              销量:{{
                Number(item.salesVolume + item.salesVolumeVirtual).toFixed(0)
              }}
            </view>
          </view>
          <view class="block2 flex aitems fontWeight">
            <view class="info1 flex aitems">
              <view class="unit f24"> ￥ </view>
              <view class="price f40">
                {{ item.goodsPrice }}
              </view></view
            >
            <view class="info2 flex aitems">
              <view class="unit f20"> ￥ </view>
              <view class="price f32">
                {{ item.marketPrice }}
              </view></view
            >
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>

    <u-popup
      mode="top"
      :safeAreaInsetBottom="false"
      :show="screenShow"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
    >
      <view class="popbox">
        <view class="cateList flex" v-if="screenType == 1">
          <scroll-view class="left" :scroll-y="true">
            <view
              :class="cateListIndex1 == index ? 'list activeList' : 'list'"
              v-for="(item, index, key) in cateList1"
              :key="key"
              @click="cateListIndex1Change(index)"
            >
              <view
                :class="
                  cateListIndex1 == index
                    ? 'title c1F1F1F f28 fontWeight'
                    : 'title c525252 f28'
                "
              >
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
          <scroll-view
            class="right"
            :scroll-y="true"
            v-if="cateListIndex1 !== null"
          >
            <view
              class="list flex aitems between"
              v-for="(item, index, key) in cateList1[cateListIndex1].children"
              :key="key"
              @click="cateListIndex2Change(index)"
            >
              <view
                :class="
                  cateListIndex2 == index
                    ? 'title c1F1F1F f28 fontWeight'
                    : 'title c525252 f28'
                "
              >
                {{ item.name }}
              </view>
              <u-icon
                v-if="cateListIndex2 == index"
                size="20"
                name="checkmark-circle-fill"
                color="var(--view-theme)"
              ></u-icon>
            </view>
          </scroll-view>
        </view>
        <view class="priceList flex" v-if="screenType == 2">
          <scroll-view :scroll-y="true" class="scrollView">
            <view class="block1 flex aitems wrap">
              <view
                :style="{
                  border: `${
                    priceListIndex == index ? '1px solid var(--view-theme)' : ''
                  }`,
                  background: `${
                    priceListIndex == index ? 'var(--view-minorColorT)' : ''
                  }`,
                }"
                class="list"
                v-for="(item, index, key) in priceList"
                :key="key"
                @click="priceListIndexChange(index)"
              >
                <view
                  :class="
                    priceListIndex == index
                      ? 'title themeColor f24 fontWeight'
                      : 'title c1F1F1F f24'
                  "
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
            <view class="block2 flex aitems jcenter">
              <view class="info1">
                <input
                  type="number"
                  v-model="minPrice"
                  placeholder="自定义最低价"
                  placeholder-class="cCCC f32"
                  class="c1F1F1F f32"
                />
              </view>
              <view class="info2"> </view>
              <view class="info1">
                <input
                  type="number"
                  v-model="maxPrice"
                  placeholder="自定义最高价"
                  placeholder-class="cCCC f32"
                  class="c1F1F1F f32"
                />
              </view>
            </view>
          </scroll-view>
        </view>
        <!-- <view class="sortList flex" v-if="screenType == 3">
          <view class="block1">
            <view
              class="list flex aitems between"
              v-for="(item, index,key) in sortList"
              :key="key"
              @click="sortListIndexChange(index)"
            >
              <view
                :class="
                  sortListIndex == index
                    ? 'title c1F1F1F f28'
                    : 'title c1F1F1F f28'
                "
              >
                {{ item.name }}
              </view>
              <u-icon
                v-if="sortListIndex == index"
                size="20"
                name="checkmark-circle-fill"
                color="var(--view-theme)"
              ></u-icon>
            </view>
          </view>
        </view> -->
        <view class="popBtn">
          <view class="btn1 f32 fontWeight cfff" @click="searchOk"> 确定 </view>
          <view class="btn2" @click="refOk"> 重置 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import colors from "@/mixins/color";
import {
  goodsPage,
  goodsCategoryList,
  updateParent,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getGloBalData, getToken } from "../../utils/storage";
import { handleLoopCallBack } from "../../utils/util";
import { getEnv } from "../../utils/env";
export default {
  mixins: [colors],
  data() {
    return {
      saleType: "",
      priceType: "",
      screenType: "", //1分类 2价格 3排序
      screenShow: false,
      name: "",
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
      cateListIndex1: 0,
      cateListIndex2: null,
      sortList: [
        {
          name: "最新发布",
        },
        {
          name: "总价从低到高",
        },
        {
          name: "总价从高到低",
        },
      ],
      sortListIndex: 0,
      priceList: [
        {
          name: "0-9元",
          min: 0,
          max: 9,
        },
        {
          name: "9-35元",
          min: 9,
          max: 35,
        },
        {
          name: "35-90元",
          min: 35,
          max: 90,
        },
        {
          name: "90-150元",
          min: 90,
          max: 150,
        },
        {
          name: "150-300元",
          min: 150,
          max: 300,
        },
        {
          name: "300元以上",
          min: 300,
          max: 9999999,
        },
      ],
      priceListIndex: null,
      minPrice: "",
      maxPrice: "",
      params: {},
      cateList1: [],
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    if (options.id) {
      this.params.categoryId = options.id;
    }
    if (options.title) {
      uni.setNavigationBarTitle({
        title: options.title,
      });
    }
    if (getToken()) {
      this.handleGoodsPage();
      this.goodsCategoryList();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        this.handleGoodsPage();
        this.goodsCategoryList();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });

      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    async goodsCategoryList(parentId = 0) {
      let { data } = await goodsCategoryList({
        parentId,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        if (parentId > 0) {
          if (data.data.length == 0) {
            this.cateListIndex2 = null;
          } else {
            this.cateListIndex2 = 0;
          }
          this.cateList1.map((item) => {
            if (item.id == parentId) {
              item.children = data.data;
              console.log(item.children);
            }
          });
          return false;
        }
        data.data.unshift({
          name: "全部",
          id: "0",
        });
        data.data.map((item) => {
          item.children = [];
        });
        this.cateList1 = data.data;
        // if (this.cateList1.length !== 0) {
        //   this.goodsCategoryList(this.cateList1[0].id);
        // }
      }
    },
    cateListIndex1Change(index) {
      this.cateListIndex1 = index;
      this.cateListIndex2 = null;
      this.goodsCategoryList(this.cateList1[this.cateListIndex1].id);
    },
    cateListIndex2Change(index) {
      this.cateListIndex2 = index;
    },
    screenTypeChange(type) {
      this.screenType = type;
      this.screenShow = true;
    },
    sortListIndexChange(index) {
      this.sortListIndex = index;
    },
    priceListIndexChange(index) {
      this.priceListIndex = index;
      this.minPrice = this.priceList[this.priceListIndex].min;
      this.maxPrice = this.priceList[this.priceListIndex].max;
    },
    saleChange() {
      this.priceType = "";
      this.screenType = "";
      this.screenShow = false;
      if (this.saleType == "") {
        this.saleType = 2;
      } else if (this.saleType == 2) {
        this.saleType = 1;
      } else if (this.saleType == 1) {
        this.saleType = "";
      }
      this.params.orderByAsc = this.saleType == 1 ? "salesVolume" : "";
      this.params.orderByDesc = this.saleType == 2 ? "salesVolume" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    priceChange() {
      this.saleType = "";
      this.screenType = "";
      this.screenShow = false;
      if (this.priceType == "") {
        this.priceType = 2;
      } else if (this.priceType == 2) {
        this.priceType = 1;
      } else if (this.priceType == 1) {
        this.priceType = "";
      }
      this.params.orderByAsc = this.priceType == 1 ? "goodsPrice" : "";
      this.params.orderByDesc = this.priceType == 2 ? "goodsPrice" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    searchChange() {
      this.current = 1;
      this.handleGoodsPage();
    },
    async handleGoodsPage() {
      loading();
      let { data } = await goodsPage({
        current: this.current,
        size: 10,
        name: this.name,
        goodsPriceBegin: this.minPrice,
        goodsPriceEnd: this.maxPrice,
        ...this.params,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },

    searchOk() {
      if (this.cateListIndex1 !== null) {
        this.params.categoryId =
          this.cateList1[this.cateListIndex1].id > 0
            ? this.cateList1[this.cateListIndex1].id
            : "";
      }
      if (this.cateListIndex2 !== null) {
        this.params.categoryId =
          this.cateList1[this.cateListIndex1].children[this.cateListIndex2].id;
      }
      this.screenShow = false;
      this.current = 1;
      this.handleGoodsPage();
    },

    refOk() {
      this.params = {};
      this.saleType = "";
      this.priceType = "";
      this.minPrice = "";
      this.maxPrice = "";
      this.screenType = "";
      this.cateListIndex1 = 0;
      this.cateListIndex2 = null;
      this.screenShow = false;
      this.current = 1;
      this.name = "";
      this.handleGoodsPage();
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.handleGoodsPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.handleGoodsPage();
  },
  onShareAppMessage: function (e) {
    return {
      title: "搜索",
      path: `/pages/goods/search?uid=${getGloBalData("userinfo").id}&id=${
        this.options.id ? this.options.id : ""
      }&title=${this.options.title ? this.options.title : ""}`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.searchModule {
  background: #fff;
  padding: 30rpx 30rpx 18rpx;
  position: fixed;
  width: calc(100% - 60rpx);
  top: 0;
  z-index: 999999;

  .block1 {
    border-radius: 44rpx;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
    height: 74rpx;
    padding: 0 0 0 30rpx;

    .input {
      width: calc(100% - 100rpx - 150rpx);
      margin-left: 20rpx;

      input {
        width: 100%;
      }
    }

    .btn {
      background: var(--view-theme);
      padding: 0 48rpx;
      border-radius: 44rpx;
      position: absolute;
      right: 4rpx;
      height: 64rpx;
      line-height: 64rpx;
    }
  }

  .block2 {
    margin: 40rpx 0 0;

    .info1 {
      .tip1 {
      }

      .arrow-down-fill {
        margin-left: 12rpx;
      }
    }
  }
}

.goodsModule {
  margin: 30rpx 30rpx 0;

  .goodslist {
    background: #fff;
    border-radius: 24rpx;
    padding: 16rpx;
    margin: 0 0 24rpx 0;

    .goodsimgBox {
      position: relative;
      .goodsimg {
        width: 230rpx;
        height: 230rpx;
        border-radius: 24rpx;
      }
      .no-stock {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          height: 230rpx;
          // height: 230rpx;
          object-fit: cover;
        }
      }
    }

    .goodsinfo {
      width: calc(100% - 230rpx - 16rpx);
      margin-left: 16rpx;
      height: 260rpx;

      .block1 {
        width: 100%;

        .goodsname {
        }

        .goodslabel {
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            padding: 4rpx 18rpx;
            border: 1px solid var(--view-theme);
            border-radius: 8rpx;
            margin: 0 20rpx 0 0;
          }
        }
      }

      .block2 {
        color: var(--view-theme);

        .unit {
          // position: relative;
          // top: 16rpx;
        }

        .price {
        }
        .info2 {
          text-decoration: line-through;
          color: #999;
          margin-left: 8rpx;
        }
      }
    }
  }
}

.popbox {
  padding: 200rpx 0 0;
  border-radius: 0 0 38rpx 38rpx;
  background: #fff;
  overflow: hidden;

  .cateList {
    height: 460rpx;

    .left {
      background: #f5f5f5;
      width: 200rpx;

      .list {
        text-align: center;
        padding: 28rpx 10rpx;

        .title {
        }
      }

      .activeList {
        background: #fff;
      }
    }

    .right {
      width: calc(100% - 200rpx);

      .list {
        text-align: center;
        padding: 28rpx 44rpx;

        .title {
        }
      }
    }
  }

  .sortList {
    height: 460rpx;

    .block1 {
      background: #fff;
      width: 100%;

      .list {
        text-align: center;
        padding: 28rpx 30rpx;

        .title {
        }
      }

      .activeList {
        background: #fff;
      }
    }
  }

  .priceList {
    // height: 360rpx;

    .block1 {
      width: 100%;

      .list {
        width: 157rpx;
        padding: 16rpx 0;
        border-radius: 80rpx;
        border: 1px solid #ccc;
        background: #fff;
        text-align: center;
        margin: 24rpx 0 0 24rpx;

        .title {
        }
      }
    }

    .block2 {
      margin: 50rpx 0 0;

      .info1 {
        width: 260rpx;
        padding: 18rpx 30rpx;
        border-radius: 80rpx;
        border: 2rpx solid #ccc;

        input {
          text-align: center;
          width: 100%;
        }
      }

      .info2 {
        margin: 0 20rpx;
        background: #d9d9d9;
        width: 26rpx;
        height: 2rpx;
      }
    }
  }

  .popBtn {
    margin: 30rpx 30rpx 0;

    .btn1 {
      border-radius: 60rpx;
      background: var(--view-theme);
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
    }

    .btn2 {
      color: var(--view-theme);
      text-align: center;
      margin: 40rpx 0;
    }
  }
}
</style>
